<template>
  <div class="bg">
    <img :src="currentImage" alt="" class="bg-image">
    
    <!-- 浮动角色 -->
    <div class="floating-characters">
      <div class="character character-1" :style="{animationDelay: '0s'}">
        <img src="https://img-blog.csdnimg.cn/direct/ec034282b28041cc9a7d66019ecb07e9.jpeg" alt="">
        <div class="speech-bubble">来玩呀~</div>
      </div>
      <div class="character character-2" :style="{animationDelay: '1s'}">
        <img src="https://img-blog.csdnimg.cn/direct/519b115c2e2c4ff1a45707505f833b00.jpeg" alt="">
        <div class="speech-bubble">拼图超有趣！</div>
      </div>
    </div>

    <!-- 动态按钮 -->
    <div class="press1 magical-btn">
      <router-link to="/game">
        <div class="btn-content">
          <span class="sparkle">✨</span>
          <img src="../assets/images/img01.jpg" alt="" class="press-image">
          <span class="btn-text">开始冒险</span>
          <span class="sparkle">✨</span>
        </div>
      </router-link>
    </div>
    
    <div class="press2 magical-btn">
      <router-link to="/guide">
        <div class="btn-content">
          <span class="sparkle">📖</span>
          <img src="../assets/images/img02.jpg" alt="" class="press-image">
          <span class="btn-text">故事指南</span>
          <span class="sparkle">📖</span>
        </div>
      </router-link>
    </div>

    <!-- 粒子效果 -->
    <div class="particles"></div>
  </div>
</template>

<script>
export default{
  name: 'index',
  data(){
    return{
      images : [
        'https://i-blog.csdnimg.cn/direct/c9725cae279b4f44ad14af30525822ef.png',
        'https://img-blog.csdnimg.cn/direct/66aa8ee0a4be4255bf33b590d356d7fa.gif',
        'https://img-blog.csdnimg.cn/direct/eaf3bd3770b44c6baabda0df53498a31.gif',
        'https://img-blog.csdnimg.cn/direct/8b45808bc745493e90731e08423c2a24.png',
        'https://img-blog.csdnimg.cn/direct/fcaba44d976b4e008ce30d1ccd1a644e.png',
        'https://img-blog.csdnimg.cn/54339bf43e0040fd8fbfbf1cfa733eca.png',
        'https://img-blog.csdnimg.cn/ed2dce45458545ac9e5e6b1aab556581.png',
        'https://img-blog.csdnimg.cn/11428243ba3d4c6d84be25e11fea2c94.jpeg',
        'https://img-blog.csdnimg.cn/edf60bd9f7a84e7db106a162ff7c1b03.png',
        'https://img-blog.csdnimg.cn/aba183b9a63747a4b380f64dbd4a4561.jpeg',
        'https://img-blog.csdnimg.cn/681d1d43ab404f3fba87f9280ba93c89.gif',
        'https://img-blog.csdnimg.cn/59ade84194934c359dd89f5b2de2ea47.png'
      ],
      currentImage: ''
    }
  },
  mounted(){
    this.setRandomImage();
    this.createParticles();
  },
  methods:{
    setRandomImage(){
      const randomIndex = Math.floor(Math.random() * this.images.length);
      this.currentImage = this.images[randomIndex];
    },
    createParticles() {
      const particles = document.querySelector('.particles');
      for (let i = 0; i < 50; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.cssText = `
          left: ${Math.random() * 100}%;
          animation-delay: ${Math.random() * 20}s;
          background: hsl(${Math.random() * 360}, 100%, 70%);
        `;
        particles.appendChild(particle);
      }
    }
  }
}
</script>

<style scoped>
.bg {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.bg-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  animation: gentleMove 20s infinite alternate;
}

@keyframes gentleMove {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.05) rotate(0.5deg); }
}

.floating-characters {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.character {
  position: absolute;
  width: 80px;
  height: 80px;
  animation: float 6s ease-in-out infinite;
}

.character-1 { top: 20%; left: 10%; }
.character-2 { top: 60%; right: 10%; }

.character img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #ff6b9d;
  box-shadow: 0 0 20px rgba(255, 107, 157, 0.5);
}

.speech-bubble {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  white-space: nowrap;
  animation: bounce 2s infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.1); }
}

.magical-btn {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  z-index: 2;
  transition: all 0.3s ease;
}

.press1 { left: 4%; width: 18%; }
.press2 { right: 4%; width: 18%; }

.btn-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.magical-btn:hover {
  transform: translateY(-50%) scale(1.1);
}

.magical-btn:hover .btn-content {
  animation: wiggle 0.5s ease;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

.sparkle {
  font-size: 1.5em;
  animation: sparkle 1.5s infinite;
}

.btn-text {
  position: absolute;
  bottom: -30px;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 600px) {
  .press1, .press2 {
    top: 70%;
    width: 30%;
  }
  
  .character {
    width: 60px;
    height: 60px;
  }
}
</style>